<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button type="button" onclick="history.go(-1)">返回</button>
  <button type="button" id="tc">弹窗</button>
  <h2>hash模式</h2>
  <ul>
    <li onclick="Router.push('/')">首页</li>
    <li onclick="Router.push('/news')">新闻</li>
    <li onclick="Router.push('/product')">产品</li>
  </ul>
  <div id="app"></div>
  <button data-tippy-content="Tooltip">Text</button>
  <button data-tippy-content="Another Tooltip">Text</button>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  <script src="https://lib.baomitu.com/tippy.js/6.1.0/tippy.esm.min.js"></script>
  <script>
    tippy('[data-tippy-content]');


      var tc = document.getElementById("tc")
      tc.addEventListener("click", function(){
        swal({
          text: "Hello world!",
          title: "Here's a title",
          icon: "success",
          buttons: ["不用了", "好的"]
        }).then(res => {
          if(res){
            console.log("好的")
          } else {
            console.log("不用了")
          }
        })
      })
  </script>
  <script>
    /*
      Hash模式：
        Hash的基本概念：Hash方法是在路由中带有一个#，主要原理是通过监听#后面url路径
        标识符的更改而触发的浏览器hashchange事件，然后通过获取location.hash得到当前
        的路径标识符，再进行一些路由跳转的操作

    */
    var app = document.getElementById("app")
    function RouterClass(){
      this.routes = {}
      this.curUrl = ''
      this.eventHashRouter()
    }
    RouterClass.prototype.eventHashRouter = function(){
      window.addEventListener("load", this.hashRouter.bind(this))
      window.addEventListener('hashchange', this.hashRouter.bind(this))
    }
    RouterClass.prototype.hashRouter = function(){
      this.curUrl = window.location.hash.slice(1) || "/"
      // console.log(this.curUrl)
      this.routes[this.curUrl]()
    }
    RouterClass.prototype.route = function(push, callback){
      this.routes[push] = callback || function(){}
    }

    RouterClass.prototype.push = function(url){
      console.log(url)
      url = "#" + url
      window.location.href = url
    }



    var Router = new RouterClass()

    Router.route('/', function(){
      app.innerHTML = "首页"
    })
    Router.route('/news', function(){
      app.innerHTML = "新闻"
    })
    Router.route('/product', function(){
      app.innerHTML = "产品"
    })

  </script>
</body>
</html>